.clip-fade {
  &-enter-active,
  &-leave-active {
    // position: absolute;
    transition: all 0.5s;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
  }

  &-enter-to,
  &-leave-from {
    opacity: 1;
    clip-path: inset(0 0% 0 0%);
  }
}

.trans-fade {
  &-enter-active,
  &-leave-active {
    transition: all 0.25s;
  }

  &-enter-from {
    transform: scale(0.8);
    opacity: 0;
  }

  &-enter-to {
    transform: scale(1);
  }

  &-leave-from {
    transform: translateX(0%);
  }

  &-leave-to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.fade {
  &-enter-active,
  &-leave-active {
    transition: all 0.3s;
  }

  &-enter-from,
  &-leave-to {
    opacity: 0;
  }

  &-enter-to,
  &-leave-from {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
